<Card Class="dashboard-products-root">
    <CardHeader
        Subtitle="@Subtitle"
        Title="Latest products" />
    <Divider />
    <CardContent Class="dashboard-products-content">
        <List>
        @foreach(var (product, index, total) in GetProducts())
        {
            <ListItem
                Divider="@(index < total - 1)"
                @key="@product.Id"
                Context="ListContext">
                <ListItemAvatar>
                    <img
                        alt="Product"
                        class="dashboard-products-image"
                        src="@product.ImageUrl" />
                </ListItemAvatar>
                <ListItemText
                    Primary="@product.Title"
                    Secondary="@GetUpdated(product)"
                />
                <IconButton
                    Edge="@IconButtonEdge.End"
                    Size="@IconButtonSize.Small">
                    <MoreVertIcon />
                </IconButton>
            </ListItem>
        }
        </List>
    </CardContent>
    <Divider />
    <CardActions Class="dashboard-products-actions">
        <Button
            Color="@Color.Primary"
            Size="@Size.Small"

     Variant="@ButtonVariant.Text">
            View all <ArrowRightIcon />
        </Button>
    </CardActions>
</Card>

@code
{
    [Parameter]
    public IEnumerable<Product> Products { set; get; }

    protected string Subtitle => $"{Products.Count()} in total";

    protected static string GetUpdated(Product product) => $"Updated at {product.UpdatedAt}";

    protected IEnumerable<(Product product, int index, int total)> GetProducts()
    {
        var products = Products.ToList();

        var total = products.Count;

        return products.Select((product, index) => (product, index, total));


   }
}
